<!--  -->
<template>
  <div class="group-data-page">
    <c-title :hide="false" text="群会员"></c-title>
    <van-search
      v-model="keyword"
      shape="round"
      placeholder="搜索群会员"
      @input="searchChange"
    />
    <!--视频数据-->
    <div class="group-data">
      <block v-for="(item,index) in memberList" :key="index">
        <div class="group-item">
          <h3>{{item.group_name}}</h3>
          <div class="group-watch flex">
            <div class="watch">
              <h4>新增会员</h4>
              <p>{{item.new_member_count}}</p>
            </div>
            <div class="watch">
              <h4>已进群会员</h4>
              <p>{{item.join_member_count}}</p>
            </div>
            <div class="watch">
              <h4>未进群会员</h4>
              <p>{{item.not_join_group_count}}</p>
            </div>
            <div class="watch">
              <h4>已退群会员</h4>
              <p>{{item.out_member_count}}</p>
            </div>
            <div class="watch">
              <h4>黑名单数据</h4>
              <p>{{item.black_member_count}}</p>
            </div>
          </div>
        </div>
      </block>

    </div>
    <div class="h-50"></div>
    <footer-tabbar ></footer-tabbar>
  </div>
</template>

<script>
import groupMember_controller from "./groupMember_controller.js";
export default groupMember_controller;
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  .h-50 {
    height: 50px;
    clear: both;
  }
  .group-data {
    margin:0.625rem 0.75rem 0 0.75rem;
    .group-item {
      padding:0.75rem 0.75rem 0 0.75rem;
      background-color: #fff;
      border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
      margin:0 0 0.625rem 0;
      h3 {
        font-weight: bold;
        color: #00001C;
        font-size: 1rem;
        line-height: 1rem;
        padding:0 0 0.75rem 0;
        border-bottom: 0.0625rem solid #F0F0F1;
        text-align: left;
      }
      .group-watch {
        padding:1rem 0 0.8125rem 0;
        flex-wrap: wrap;
        // align-content: flex-start;
        .watch {
          flex: 0 0 33.3%;
          padding:0 0 21px 0;
          &:nth-last-child(-n+2){
            padding:0;
          }
          // padding: 0 4.1875rem 0 0;
          h4 {
            font-size: 0.75rem;
            line-height: 0.75rem;
            color: #6E6E79;
            padding-bottom: 0.3125rem;
            text-align: left;
          }
          p {
            text-align: left;
            color: #00001C;
            line-height: 1.25rem;
            // font-weight: 500;
            font-weight: bold;
          }
        }
      }
    }
  }
</style>